<template>
  <div>
    <!-- title -->
    <van-nav-bar title="订单备注" left-text="" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" />
      </template>
    </van-nav-bar>
    <!-- van-cell-group -->
    <van-cell-group>
      <!-- cell-card -->
      <van-cell v-for="item of cardList" :key="item.title">
        <template #title>
          <span class="title">{{ item.title }}</span>
        </template>
        <template #label>
          <span class="btn"><van-button round plain type="default" size="small"
              :class="!item.need ? 'btn_left active' : 'btn_left'"
              @click="changeNotNeed(item.title)">不需要</van-button><van-button round plain type="default" size="small"
              :class="item.need ? 'btn_right active' : 'btn_right'"
              @click="changeNeed(item.title)">需要</van-button></span>
        </template>
      </van-cell>
      <!--  comment -->
      <van-cell-group inset>
        <van-field v-model="message" rows="3" autosize type="textarea" maxlength="30" placeholder="输入备注内容(口味备注不在此处留言)"
          show-word-limit />
      </van-cell-group>
      <!-- btn -->
      <van-cell-group class="btn">
        <van-button type="primary" block @click="submit">提交</van-button>
      </van-cell-group>
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 历史回退
const onClickLeft = () => history.back();
// 备注内容
const message = ref();


// 备注卡片
// 定义循环数据
const cardList = ref([
  {
    title: "纸巾",
    need: false,
  },
  {
    title: "奶包",
    need: false,
  },
  {
    title: "糖包",
    need: false,
  },
])
// 点击改变按钮以及数据
const changeNeed = (title) => {
  cardList.value.forEach(i => {
    if (i.title == title) {
      i.need = true
    }
  })
};
const changeNotNeed = (title) => {
  cardList.value.forEach(i => {
    if (i.title == title) {
      i.need = false
    }
  })
};


// 提交
const submit = () => {
  console.log(cardList.value, message.value);
}
</script>

<style lang="scss" scoped>
// title
.van-icon {
  color: grey;
}

// van-cell
.van-cell {
  padding-bottom: 0;

  :deep(.van-cell__title) {
    padding-bottom: 0.3rem;
    border-bottom: 0.0425rem solid rgb(221, 221, 221);
  }

  .title {
    font-size: 0.52rem;
  }

  .btn {
    display: block;
    margin-top: 0.3rem;

    .btn_left {
      width: 1.8rem;
    }

    .active {
      color: rgb(104, 178, 243);
      border: 1px solid rgba(136, 175, 213, 1);
    }

    .btn_right {
      width: 1.8rem;
      margin-left: 0.25rem;
    }
  }
}

// van-field
.van-field {
  background-color: rgba(248, 248, 248, 1);
}

.btn {
  margin-top: 0.5rem;
  padding: 0.35rem;
  box-sizing: border-box;
}
</style>